﻿<style type="text/css">
    #lastVisitedBox 
    {
    	float:right
    }
</style>

<div id="lastVisitedBox">
    <h3>Perfiles Vistos</h3>
    <div id="lastVisited_template" class="" style="display: none">
        <a href="#"><img src="" alt="" width="60" /></a>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        /* Lee los últimos usuarios visitados del LocalStorage. */
        cargarUltimosUsuariosVisitados();
    });

    function cargarUltimosUsuariosVisitados() {
        var key = '';
        
        if ('@ViewBag.UsuarioActual' != '')
            key = '@ViewBag.UsuarioActual';
        else
            key = "anonimo";

        var contenidoLocalStorage = localStorage.getItem(key + "_UltimosUsuariosVisitados");

        // no hay nada que mostrar
        if (contenidoLocalStorage == null)
            return;

        contenidoLocalStorage = contenidoLocalStorage.substring(0, contenidoLocalStorage.length);
        
        var ultimosUsuariosVisitados = contenidoLocalStorage.split(';');

        if (ultimosUsuariosVisitados == undefined)
            return;

        for (var i = 0; i < ultimosUsuariosVisitados.length - 1; i++) {
            var usuario = eval('(' + ultimosUsuariosVisitados[i] + ')');

            crearTemplate(usuario);
        }
    }

    function crearTemplate(usuario) {
        var $template = $('#lastVisited_template').clone().attr('id', '').css('display', 'block');
        
        $template.find('img').attr("src", '@Url.Content("~/FotosUsuarios/")' + usuario.foto);
        $template.find('img').attr("title", "Nombre: " + usuario.nombreUsuario + " - Edad: " + usuario.edad);
        $template.find('a').attr("href", usuario.nombreUsuario);

        $('#lastVisitedBox').append($template);
    }

</script>